<template>
  <div >

<q-card   text-h3 text-center>

采购申请报表

</q-card>

  </div>
  <div class="column" style="height: 95%">

    <!-- 表头部分 -->
    <div class="col-1">
      <q-card flat>
        <div style="height: 15px"></div>
        <q-separator spaced="1px" color="#542525" inset size="6px" />
      </q-card>
    </div>

    <!-- 表头部分 -->

    <div class="col-1">
      <!-- 表头的输入框和按键 -->
      <q-card flat>
        <div class="q-gutter-md row justify-around">
          <div class="col-0"></div>
          <q-input
            v-model.trim="box.customerPurchaseOrderId"
            type="text"
            hint="自定义订单号"
          >
            <template v-slot:append>
              <q-icon name="gesture" size="80%" />
            </template>
          </q-input>
          <q-input v-model.trim="box.supplierName" type="text" hint="供应商">
            <template v-slot:append>
              <q-icon name="person" size="80%" />
            </template>
          </q-input>
          <q-input
            v-model.trim="box.purchaseOrderId"
            type="text"
            hint="采购订单号"
          >
            <template v-slot:append>
              <q-icon name="view_stream" size="80%" />
            </template>
          </q-input>
          <q-btn
            class="title_font2"
            @click="webSearchPurchaseOrder"
            push
            label="查询"
            ripple
            text-color="teal-9"
          />
          <div class="col-0"></div>
        </div>

        <!-- 操作栏 -->


        <!-- 间距 -->
        <div style="height: 15px"></div>
        <q-separator spaced="1px" color="#542525" inset size="6px" />
      </q-card>
    </div>

    <!-- 表体部分 -->
    <div class="col-3">
      <q-table
        :rows="box.PurchaseOrderData"
        :columns="columnsReport"
        flat
        :rows-per-page-options="[30]"
      >
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              <div class="title_font">{{ col.label }}</div>
            </q-th>
          </q-tr>
        </template>

        <!-- 表体部分 -->
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="purchaseOrderId" :props="props">{{ props.row.purchaseOrderId }}</q-td>
            <q-td key="customerPurchaseOrderId" :props="props">{{ props.row.customerPurchaseOrderId }}</q-td>
            <q-td key="handleDate" :props="props">{{ props.row.handleDate }}</q-td>
            <!-- 供应商-->
            <q-td key="supplierName" :props="props">{{  props.row.supplierName }}</q-td>
            <!-- 产品分类-->
            <q-td key="goodsName" :props="props">{{  props.row.goodsName }}</q-td>
            <!-- 产品材质 -->
<!--            <q-td key="goodsMaterial" :props="props">-->
<!--              {{ props.row.goodsMaterial }}-->
<!--            </q-td>-->
            <!-- 产品规格 -->
            <q-td key="goodsSize" :props="props">
              {{ props.row.goodsSize }}
            </q-td>
            <!-- 产品样式 -->
            <q-td key="goodsStyle" :props="props">
              {{ props.row.goodsStyle }}
            </q-td>
            <!-- 订购数量 -->
            <q-td key="purchaseOrderQuantity" :props="props">
              {{ props.row.purchaseOrderQuantity }}
            </q-td>
            <!-- 适用产品 -->
            <q-td key="forProductName" :props="props">
              {{ props.row.forProductName }}
            </q-td>
            <!-- 备注信息 -->
<!--            <q-td key="customerMark" :props="props">-->
<!--              {{ props.row.customerMark }}-->
<!--            </q-td>-->
            <!-- 状态 -->
            <q-td key="purchaseOrderState" :props="props">

              <q-badge :color=" props.row.purchaseOrderState =='待入库' ? Mycolor[5] : Mycolor[4]">
                {{ props.row.purchaseOrderState }}
              </q-badge>
            </q-td>
            <!-- 操作 .trim-->
            <q-td key="purchaseOrderIndex" :props="props">
              <q-btn
                icon="delete"
                @click.stop="boxRowDelete(props.row)"
                dense
                flat
                push
                class="but_float"
              />
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </div>
  </div>
</template>

<script>
import {reactive, onMounted, toRaw} from "vue";
import {
  getPurchaseOrder,

  deletePurchaseOrder
} from "../../API/PurchaseOrder/insertPurchaseOrderAPI";
import { columnsReport } from "../../API/PurchaseOrder/purchaseOrderData";
export default {
  data() {
    //获取订单信息
    onMounted(function () {
      box.PurchaseOrderData.length = 0;
      aa();

      async function aa() {
        const searchData = JSON.stringify({
          "purchaseOrderId":null
        });
        var res = await getPurchaseOrder(searchData);
        console.log(res.data);
        box.PurchaseOrderData = res.data;
      }
    });
    function  webSearchPurchaseOrder (){

      var webReq = JSON.stringify(
          {
            "purchaseOrderId": toRaw(box.purchaseOrderId)+"",
            "customerPurchaseOrderId": toRaw(box.customerPurchaseOrderId)+"",
            "supplierName": toRaw(box.supplierName)+""
          }
      );

      bbf(webReq)

      async function bbf(webReq) {
        var res = await getPurchaseOrder(webReq);
        console.log(res.data);
        if (res.data.length>0){
          box.PurchaseOrderData.length=0
          box.PurchaseOrderData = res.data;
        }else {
          alert("没有查询到")
        }

      }
    }
    function  boxRowDelete (arow){
      console.log(toRaw(arow.purchaseOrderIndex))
      var webReq = JSON.stringify(
        {
          "purchaseOrderIndex": toRaw(arow.purchaseOrderIndex)+""
        }
      );
      console.log(webReq)
      bb(webReq)
      async function bb(webReq) {
        var res = await deletePurchaseOrder(webReq);
        console.log(res.data);
        location.reload()
      }
    }
    return {
      webSearchPurchaseOrder,
      box,
      boxRowDelete,
      columnsReport,
      Mycolor: ["red", "green", "purple", "orange", "primary", "teal", "white"],
    };
  },
};

const box = reactive({
  isHeader: false, //智能提示卡片
  isPrompts: false, //开启智能提示
  boxDialog: false,
  isDialog: false, //输入错误消息框
  isErrRow: false, //输入不完整消息框
  errRowData: null, //输入不完整消息框内容
  boxIsShow: true,
  SMRIsShow: true,
  trayIsShow: true,
  yesExport: "内销",
  boxPlanDate: "2022/12/12",
  goods: "",
  goodsSize: null,
  goodsStyle: "分块叠高",
  purchaseOrderQuantity: null,

  customerPurchaseOrderId: "",
  purchaseOrderId: "",
  forProductName: null,
  customerMark: null,
  supplierName: "",
  PurchaseOrderData: [],
  boxOptions: ["分块叠高", "整条叠高", "实木"],
  purchaseOrderIdList: [],
});
</script>
<style>
.title_font2 {
  font-size: 18px;
  font-weight: bolder;
}
</style>
